define([
	"knockout",
	"jquery",
	"text!../template/login-form-web.html",
	"framework/js/constants/constants",
	"ojs/ojbutton",
	"ojs/ojinputtext",
	"ojs/ojswitch"
], function (ko, $, template, Constants) {
	"use strict";
	var vm = function (rootParams) {
		var self = this;
		var GenericViewModel = null;

		ko.utils.extend(self, rootParams.rootModel);
		self.alternateLogin = ko.observable();
		self.PromotionLogin = ko.observableArray([{
			id: '1',
			name: self.nls.loginForm.labels.creditCardRegister,
			img: "url('./images/index/bg/credit.svg')",
			url: 'https://www.scb.com.vn/vie/pages/cards_personal'
		}, {
			id: '2',
			name: self.nls.loginForm.labels.saleProgram,
			img: "url('./images/index/bg/percent.svg')",
			url: 'https://www.scb.com.vn/vie/pages/promotions_personal'
		}, {
			id: '3',
			name: self.nls.loginForm.labels.BeSafeWithSCB,
			img: "url('./images/index/bg/alert.svg')",
			url: 'https://ebanking.scb.com.vn/pages/canhbao.html'
		}]);
		self.RegisterLink = "https://www.scb.com.vn/vie/pages/online_register";
		self.afterRender = function (genericViewModel) {
			var language = sessionStorage.getItem("user-locale") || document.getElementsByTagName("html")[0].getAttribute("lang") || "en";

			GenericViewModel = genericViewModel;
			if (genericViewModel.queryMap) {
				if (genericViewModel.queryMap.p_error_code !== null && genericViewModel.queryMap.p_error_code === "OAM-10") {
					self.message(self.nls.loginForm.validationMsgs.errrorOAM10);
				} else if (genericViewModel.queryMap.p_error_code !== null && genericViewModel.queryMap.p_error_code === "OAM-5") {
					self.message(self.nls.loginForm.validationMsgs.errrorOAM5);
				} else if (genericViewModel.queryMap.p_error_code !== null && genericViewModel.queryMap.p_error_code === "OBDXIDM-0") {
					if ('vn' === language) {
						var errorMsg = genericViewModel.queryMap.p_error_message.trim();

						if (errorMsg === 'login failed') {
							self.message(self.nls.errors.LOGIN_FAILED);
						} else if (errorMsg.includes('unsuccessful')) {
							var arrwords = errorMsg.split('');
							var n0 = 0,
								n1 = 0;
							for (var i in arrwords) {
								var w = arrwords[i].trim();

								if (w && !isNaN(w)) {
									if (n0 === 0) {
										n0 = w;
									} else if (n1 === 0) {
										n1 = w;
										break;
									}
								}
							}
							self.message(rootParams.baseModel.format(self.nls.errors.Attemp_Unsuccessful, {
								'n0': n0,
								'n1': n1
							}));
						} else if (errorMsg.includes('blocked')) {
							self.message(self.nls.errors.Channel_Blocked);
						} else if (errorMsg.includes('Authentication')) {
							self.message(self.nls.errors.Authentication_Failed);
						} else if (errorMsg.includes('expired')) {
							self.message(self.nls.errors.password_expired);
						} else {
							self.message(genericViewModel.queryMap.p_error_message);
						}

					} else {
						self.message(genericViewModel.queryMap.p_error_message);
					}
				} else if (genericViewModel.queryMap.p_error_code) {
					self.message(self.nls.loginForm.validationMsgs.invalidCredentials);
				}
			}

			// rootParams.dashboard.interval = setInterval(function(){
			// 	var wildScreen = screen.width/screen.height;				
			// 	if(wildScreen >= 1.6){
			// 		if($('.loginContainer').hasClass('login-lg-background-1-169')){
			// 			$('.loginContainer').removeClass('login-lg-background-1-169').toggleClass('login-lg-background-2-169');
			// 			// $('.viewDetailAd').show(200);
			// 			$('#detailLink').attr('href', 'https://www.scb.com.vn/vie/detail/personal_promotion_detail/vay-uu-dai-mai-dong-hanh');
			// 		} else if($('.loginContainer').hasClass('login-lg-background-2-169')){
			// 			$('.loginContainer').removeClass('login-lg-background-2-169').addClass('login-lg-background-1-169');
			// 			// $('.viewDetailAd').show(200);
			// 			$('#detailLink').attr('href', 'https://www.scb.com.vn/vie/detail/personal_promotion_detail/thanh-toan-qr-uu-dai-ngap-tran');
			// 		}
			// 		// else if($('.loginContainer').hasClass('login-lg-background-3-169')){
			// 			// $('.loginContainer').removeClass('login-lg-background-3-169').addClass('login-lg-background-1-169');
			// 			// $('.viewDetailAd').hide(500);
			// 		// }
			// 	} else {
			// 		if($('.loginContainer').hasClass('login-lg-background-1-43')){
			// 			$('.loginContainer').removeClass('login-lg-background-1-43').toggleClass('login-lg-background-2-43');
			// 			// $('.viewDetailAd').show(200);
			// 			$('#detailLink').attr('href', 'https://www.scb.com.vn/vie/detail/personal_promotion_detail/vay-uu-dai-mai-dong-hanh');
			// 		} else if($('.loginContainer').hasClass('login-lg-background-2-43')){
			// 			$('.loginContainer').removeClass('login-lg-background-2-43').addClass('login-lg-background-1-43');
			// 			// $('.viewDetailAd').show(200);
			// 			$('#detailLink').attr('href', 'https://www.scb.com.vn/vie/detail/personal_promotion_detail/thanh-toan-qr-uu-dai-ngap-tran');
			// 		}
			// 		// else if($('.loginContainer').hasClass('login-lg-background-3-43')){
			// 			// $('.loginContainer').removeClass('login-lg-background-3-43').addClass('login-lg-background-1-43');
			// 			// $('#viewDetailAd').hide(500);
			// 		// }
			// 	}
			// },10000);
		};
		self.hrefViewDetail = 'https://www.scb.com.vn/vie/detail/personal_promotion_detail/thanh-toan-qr-uu-dai-ngap-tran';
		// self.PromotionLogin.push({
		// 	id: '1',
		// 	name: self.nls.loginForm.labels.findBonousScore,
		// 	img: "url('./images/index/bg/find.svg')",
		// 	icon: 'icon-insurance2',
		// 	url: 'https://www.scb.com.vn/vie/detail/personal_promotion_detail/phat-hanh-ngay-qua-trao-tay-2'
		// });
		// self.PromotionLogin.push({
		// 	id: '2',
		// 	name: self.nls.loginForm.labels.saleProgram,
		// 	img: "url('./images/index/bg/percent.svg')",
		// 	icon: 'icon-pay3',
		// 	url: 'https://www.scb.com.vn/vie/detail/personal_promotion_detail/thanh-toan-thoi-thuong-nhan-qua-an-tuong'
		// });
		// self.PromotionLogin.push({
		// 	id: '3',
		// 	name: self.nls.loginForm.labels.creditCardRegister,
		// 	img: "url('./images/index/bg/credit.svg')",
		// 	icon: 'icon-shopping-bag2',
		// 	url: 'https://www.scb.com.vn/vie/pages/cards_personal'
		// });
		self.toggleInner = function () {
			require(["ojs/ojoffcanvas"], function () {
				oj.OffcanvasUtils.toggle({
					"selector": "#innerDrawer",
					"content": ".oj-web-applayout-page",
					"modality": "modal",
					"displayMode": "push",
					"edge": "start"
				});
				$(".mobileMenu").ojNavigationList("refresh");
			});
		};
		$(document).ready(function () {
			setTimeout(function () {
				$('#imgFlag').click(function () {
					let src = $('#imgFlag').attr('src');

					if (src.indexOf('VN') > 0) {
						$('#imgFlag').fadeOut(600, 'swing', function () {
							$('#imgFlag').attr('src', './images/common/scb/Flags/flagUS.svg');
							$('#imgFlag').fadeIn(100);
						});

					} else {
						$('#imgFlag').fadeOut(600, 'swing', function () {
							$('#imgFlag').attr('src', './images/common/scb/Flags/flagVN.svg');
							$('#imgFlag').fadeIn(100);
						});

					}
				});
			}, 1000);
		});

		self.loginFingerprintStyle = ko.observable({});

		function loginOAM(path, params, method) {
			method = method || "post";

			var form = document.createElement("form");
			form.setAttribute("method", method);
			form.setAttribute("action", path);
			var hiddenField;
			for (var key in params) {
				if (params.hasOwnProperty(key)) {
					hiddenField = document.createElement("input");
					hiddenField.setAttribute("type", "hidden");
					hiddenField.setAttribute("name", key);
					hiddenField.setAttribute("value", params[key]);
					form.appendChild(hiddenField);
				}
			}
			hiddenField = document.createElement("input");
			hiddenField.setAttribute("type", "hidden");
			hiddenField.setAttribute("name", "username");
			hiddenField.setAttribute("value", self.username());
			form.appendChild(hiddenField);
			hiddenField = document.createElement("input");
			hiddenField.setAttribute("type", "hidden");
			hiddenField.setAttribute("name", "password");
			hiddenField.setAttribute("value", self.password());
			form.appendChild(hiddenField);
			document.body.appendChild(form);
			form.submit();
		}

		function loginDBAuthenticator(path, redirectURL) {
			var http = new XMLHttpRequest();
			var url = path;
			var params = "j_username=" + self.username() + "&j_password=" + encodeURIComponent(self.password());
			// http.open("POST", url, true);
			// http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			// http.setRequestHeader("redirect_url", decodeURIComponent(redirectURL));
			var objectContext = rootParams.baseModel.QueryParams.get(null, redirectURL);
			// http.onreadystatechange = function () {
			// 	if (http.status === 404) {
			// 		if (objectContext && !(/login/.test(objectContext.module))) {
			// 			if (objectContext.homeComponent && !(objectContext.homeComponent.hasOwnProperty("module"))) {
			// 				objectContext.homeComponent = {
			// 					component: objectContext.homeComponent,
			// 					module: objectContext.homeModule,
			// 					query: {}
			// 				};
			// 				delete objectContext.homeModule;
			// 				Object.keys(objectContext).forEach(function (key) {
			// 					if (key !== "homeComponent")
			// 						objectContext.homeComponent.query[key] = objectContext[key];
			// 				});
			// 			}
			// 			rootParams.baseModel.switchPage(objectContext, true);
			// 		} else {
			// 			rootParams.baseModel.switchPage({}, false);
			// 		}
			// 	} else if (http.status === 403) {
			// 		var redirectURL = window.location.origin + http.getResponseHeader("X-AUTH-LOCATION-URL");
			// 		window.location = redirectURL;
			// 	}
			// };
			// http.send(params);

			$.ajax({
				type: "POST",
				url: url,
				data: params,
				beforeSend: function (xhr) {
					xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
					xhr.setRequestHeader("redirect_url", decodeURIComponent(redirectURL));
				},
				success: function (result) {},
				error: function (rserr, ajaxOptions, thrownError) {
					// alert(xhr.status);
					// alert(thrownError);
					if (rserr.status === 404) {
						if (objectContext && !(/login/.test(objectContext.module))) {
							if (objectContext.homeComponent && !(objectContext.homeComponent.hasOwnProperty("module"))) {
								objectContext.homeComponent = {
									component: objectContext.homeComponent,
									module: objectContext.homeModule,
									query: {}
								};
								delete objectContext.homeModule;
								Object.keys(objectContext).forEach(function (key) {
									if (key !== "homeComponent")
										objectContext.homeComponent.query[key] = objectContext[key];
								});
							}
							rootParams.baseModel.switchPage(objectContext, true);
						} else {
							rootParams.baseModel.switchPage({}, false);
						}
					} else if (rserr.status === 403) {
						var redirectURL = window.location.origin + rserr.getResponseHeader("X-AUTH-LOCATION-URL");
						window.location = redirectURL;
					}
				}
			});
		}


		$(window).keypress(function (e) {
			if (e.which === 13) {
				$("#login-button").focus();
				self.onLogin(GenericViewModel);
			}
		});

		self.onLogin = function (genericViewModel) {
			if (Constants.authenticator === "OBDXAuthenticator") {
				if (genericViewModel && genericViewModel.queryMap) {
					loginDBAuthenticator(Constants.appBaseURL + "/j_security_check", genericViewModel.queryMap.redirect_url);
				} else {
					loginDBAuthenticator(Constants.appBaseURL + "/j_security_check", null);
				}
			} else {
				loginOAM("@@OAM_BASE_URL/auth_cred_submit", {
					request_id: genericViewModel.queryMap.request_id
				});
			}
		};

		self.forgotPass = function (genericViewModel) {
			var l = document.createElement("a");
			l.href = decodeURIComponent(genericViewModel.queryMap.resource_url);
			if (genericViewModel.queryMap.resource_url) {
				self.referrer = l.protocol + "//" + l.host;
			} else {
				self.referrer = window.location.origin;
			}
			window.location.href = self.referrer + "/?module=forgot-password&context=index";
		};

		$(document).on("blur", "#forgotPassword", function () {
			$("input[name='username']").focus();
		});

		self.loadTabInfo = function (url) {
			if (rootParams.baseModel.cordovaDevice()) {
				window.plugins.browsertab.isAvailable(function (isAvailable) {
					if (isAvailable) {
						window.plugins.browsertab.openUrl(url);
					} else {
						window.open(url, '_blank').focus();
					}
				});
			} else {
				window.open(url, '_blank').focus();
			}
		}

		self.PromotionClick = function (data) {
			for (var i = 0; i < self.PromotionLogin().length; i++) {
				var l_p = self.PromotionLogin()[i];
				if (l_p.id == data.id) {
					var link = l_p.url;
				}
			}
			self.loadTabInfo(link);
		};

		self.RegisterClick = function (data) {
			self.loadTabInfo(self.RegisterLink);
		};

		self.HelpClick = function () {
			rootParams.baseModel.registerComponent('scb-help', 'scb-help');
			rootParams.dashboard.loadComponent('scb-help', {}, self);
		};

		function showPlaceholder(idRootEl, idPlaceholder, isShown) {
			if (!$('#' + idRootEl).val()) {
				let p = $('#' + idRootEl).position();

				$('#' + idPlaceholder).hide();

				$('#' + idPlaceholder).css({
					color: '#FFF',
					opacity: '0.85',
					fontStyle: 'normal',
					fontSize: '.8rem',
					position: 'absolute',
					top: $('#' + idRootEl).height() == 0 ? p.top + 14 : p.top + $('#' + idRootEl).height() / 2.8,
					left: p.left + 5,
					paddingLeft: '32px'
				});
				if (isShown) {
					$('#' + idPlaceholder).fadeIn(100);
				}
			}
		};

		self.afterRenderLoginForm = function () {
			setTimeout(function () {
				//showPlaceholder('login_username', 'placeholder_username', true);

				$('#login_username').attr('type', 'email');
				$('#login_username').focus(function () {
					//let orignalCss = $('#placeholder_username').css();
					let p = $('#placeholder_username').position();

					$('#placeholder_username').css({
						color: '#FFF',
						opacity: '0.85',
						fontStyle: 'normal',
						fontSize: '.7rem',
						position: 'absolute',
						pointerEvents: 'none',
						top: p.top - 8,
						left: p.left,
						transition: '0.2s ease all'
					});
				}).focusout(function () {
					let p = $('#placeholder_username').position();

					$('#placeholder_username').css({
						color: '#FFF',
						opacity: '0.85',
						fontStyle: 'normal',
						fontSize: '.8rem',
						position: 'absolute',
						top: 'auto',
						left: 'auto',
						transition: '0.2s ease all'
					});
				}).on('keyup', function (e) {
					let v = $('#login_username').val();

					if (!v) {
						//showPlaceholder('login_username', 'placeholder_username', true);
						// $('#login_username').trigger('focus');
						$('#placeholder_username').css({
							left: 'auto'
						}).show();
					} else {
						$('#placeholder_username').hide();
					}
				});
				$('#placeholder_username').on('click', function () {
					$('#login_username').focus();
				});

				let p = $('#login_password').position();

				$('#aForgetPass').hide();

				$('#aForgetPass').css({
					color: '#FFF',
					opacity: '0.85',
					fontStyle: 'normal',
					fontSize: '.8rem',
					cursor: 'pointer',
					position: 'absolute',
					top: $('#login_password').height() == 0 ? p.top + 14 : p.top + $('#login_password').height() / 2.8,
					right: p.left + 13
				});
				$('#aForgetPass').show(100);

				//showPlaceholder('login_password', 'placeholder_password', true);
				$('#login_password').focus(function () {
					//let orignalCss = $('#placeholder_username').css();
					let p = $('#placeholder_password').position();

					$('#placeholder_password').css({
						color: '#FFF',
						opacity: '0.85',
						fontStyle: 'normal',
						fontSize: '.7rem',
						position: 'absolute',
						pointerEvents: 'none',
						top: p.top - 8,
						left: p.left,
						transition: '0.2s ease all'
					});
				}).focusout(function () {
					let p = $('#placeholder_password').position();

					$('#placeholder_password').css({
						color: '#FFF',
						opacity: '0.85',
						fontStyle: 'normal',
						fontSize: '.8rem',
						position: 'absolute',
						top: 'auto',
						left: 'auto',
						transition: '0.2s ease all'
					});
				}).on('keyup', function (e) {
					let v = $('#login_password').val();

					if (!v) {
						//                        showPlaceholder('login_password', 'placeholder_password', true);
						//                        $('#login_password').trigger('focus');
						$('#placeholder_password').css({
							left: 'auto'
						}).show();
					} else {
						$('#placeholder_password').hide();
					}
				});
				$('#placeholder_password').on('click', function () {
					$('#login_password').focus();
				});

				p = $('#login-button').position();

				self.loginFingerprintStyle({
					position: 'absolute',
					background: 'url(./images/common/scb/login_screen/iconFingerprint.svg) no-repeat',
					backgroundSize: 'cover',
					width: $('#login-button').height() + 'px',
					height: $('#login-button').height() + 'px',
					top: p.top + 'px',
					right: (p.left + 10) + 'px'
				});
			}, 1000);
		};

		self.password.subscribe(function (val) {
			if (val) {
				$('#placeholder_password').hide(50);
				$('#aForgetPass').hide(50);
			} else {
				$('#placeholder_password').show(100);
				$('#aForgetPass').show(100);
			}
		});
		self.username.subscribe(function (val) {
			if (val) {
				$('#placeholder_username').hide(50);
			} else {
				$('#placeholder_username').show(100);
			}
		});

	};
	return {
		viewModel: vm,
		template: template
	};
});